{% stylesheet %}
.block_TikTok_list-warp {
  position: relative;
}

.block_TikTok_list-warp .swiper-wrapper {
  width: 100%;
}

.block_TikTok_list-warp .tiktok-pagination {
  display: none;
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-warp .tiktok-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
  }
}

.block_TikTok_list-warp .tiktok-pagination span {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid #1d1f21;
  border-radius: 50%;
  background: none;
  margin: 0 3px;
  opacity: 1;
  box-sizing: border-box;
  flex-shrink: 0;
}

.block_TikTok_list-warp .swiper-pagination-bullet-active {
  background: #1d1f21 !important;
}

.block_TikTok_list-warp .card-tiktok {
  background: #f6f6f6;
  cursor: pointer;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover {
  position: relative;
  background-color: #eef0f5;
  padding-top: 160%;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .card-tiktok-cover-image {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .card-tiktok-status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .card-tiktok-status:hover path {
  fill: #000000;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .tiktok-cover-author {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  color: #ffffff;
  z-index: 15;
  font-size: 14px;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .tiktok-cover-author .tiktok-logo {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #ffffff;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-cover .tiktok-cover-author span {
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-info {
  padding: 0 20px;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-info .card-tiktok-title {
  margin: 18px 0;
  height: 42px;
  text-align: left;
  position: relative;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product {
  border-top: 1px solid #dddddd;
  position: relative;
  overflow: hidden;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide {
  display: flex;
  padding: 18px 20px;
  box-sizing: border-box;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-image {
  width: 88px;
  height: 88px;
  object-fit: cover;
  flex-shrink: 0;
  margin-right: 10px;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-image img {
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-info {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-title {
  font-size: 14px;
  text-align: left;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-price {
  font-weight: 400;
  line-height: 1;
  margin-top: 10px;
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide .card-tiktok-product-btn {
  display: inline-block;
  margin-top: 10px;
  font-size: 14px;
  padding: 6px 12px;
  max-width: 100px;
  color: var(--secondary_button_color);
  border-radius: var(--button_border_radius);
  background: var(--secondary_button_bg);
}

.block_TikTok_list-warp .card-tiktok .card-tiktok-product .swiper-slide-1 {
  padding: 18px 0 !important;
}

.block_TikTok_list-warp .card-tiktok .mobile-wrapper .swiper-slide {
  padding: 18px 0;
  border-top: 1px dashed #dddddd;
}

.block_TikTok_list-warp .card-tiktok .mobile-wrapper .swiper-slide:first-child {
  border-top: none;
}

.block_TikTok_list-warp .swiper-button-disabled path {
  fill: #ccc !important;
}

.block_TikTok_list-warp .block_TikTok_list-next, .block_TikTok_list-warp .block_TikTok_list-prev, .block_TikTok_list-warp .tiktok-product-prev, .block_TikTok_list-warp .tiktok-product-next {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -25px;
  cursor: pointer;
  right: -50px;
  transition: all 0.4s ease-in-out;
}

.block_TikTok_list-warp .block_TikTok_list-next svg, .block_TikTok_list-warp .block_TikTok_list-prev svg, .block_TikTok_list-warp .tiktok-product-prev svg, .block_TikTok_list-warp .tiktok-product-next svg {
  width: 20px;
  height: 20px;
}

.block_TikTok_list-warp .block_TikTok_list-next svg path, .block_TikTok_list-warp .block_TikTok_list-prev svg path, .block_TikTok_list-warp .tiktok-product-prev svg path, .block_TikTok_list-warp .tiktok-product-next svg path {
  fill: #000000;
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-warp .block_TikTok_list-next, .block_TikTok_list-warp .block_TikTok_list-prev, .block_TikTok_list-warp .tiktok-product-prev, .block_TikTok_list-warp .tiktok-product-next {
    display: none;
  }
}

.block_TikTok_list-warp .block_TikTok_list-prev {
  left: -50px;
}

.block_TikTok_list-warp .tiktok-product-prev {
  left: -8px;
  width: 25px;
}

.block_TikTok_list-warp .tiktok-product-next {
  right: -8px;
  width: 25px;
}

.block_TikTok_list-warp .tiktok-gid {
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-warp .tiktok-gid {
    grid-gap: 15px;
    grid-template-columns: repeat(1, 1fr);
  }
}

@media screen and (min-width: 767px) and (max-width: 1024px) {
  .block_TikTok_list-warp .tiktok-gid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.block_TikTok_list-warp .block_video-pc-show {
  position: relative;
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-warp .block_video-pc-show {
    display: none;
  }
}

.block_TikTok_list-warp .block_video-pc-hide {
  display: none;
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-warp .block_video-pc-hide {
    display: block;
  }
}

.layer-tiktok {
  background-color: #ffffff;
  border-radius: 8px;
  position: relative;
  max-height: 80vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.layer-tiktok .layer-tiktok-close {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 14px;
  left: 14px;
  z-index: 100;
  background-color: #fff;
  border-radius: 50%;
  padding: 6px;
  box-shadow: 0 0 5px #eee;
}

.layer-tiktok .tiktok-embed {
  margin: 0 auto;
}

.block_TikTok_list-more {
  text-align: center;
  margin-top: calc(var(--general_layout_spacing) * 0.5);
}

@media screen and (max-width: 767px) {
  .block_TikTok_list-more {
    margin-top: 30px;
  }
}

.block_TikTok_list-more .secondary_btn {
  display: inline-flex;
  align-items: center;
}

.block_TikTok_list-more a {
  margin: 0;
}

{% endstylesheet %}

{% assign blockId = block_id | default : section.block_id %}

<div class="block_TikTok_list container_wrapper">
    {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

    {% assign video_ids = section.blocks | get_array_values: "video" | get_array_values: "id" | join: "," %}
    <div class="block_TikTok_list-warp">
        <div style="overflow: hidden; width: 100%;min-height:100px" id="block_TikTok_list-{{blockId}}">
            <div class="tiktok-item-container swiper-wrapper swiper-wrapper "></div>
            {% comment %} block_video-pc-show <div class="tiktok-gid tiktok-item-container  block_video-pc-hide"></div> {% endcomment %}
        </div>
        {% if section.blocks.size > 4 %}
        <div class="block_TikTok_list-prev" id="block_prev_{{ blockId  }}">{% include 'icon_silde_left' ,width:'24',height:'24' %}</div>
        <div class="block_TikTok_list-next" id="block_next_{{ blockId  }}">{% include 'icon_silde_right' ,width:'24',height:'24' %}</div>
        {% endif %}
        {% if section.blocks.size > 1 %}
        <div class="tiktok-pagination swiper-tiktok-pagination-{{ blockId }}"></div>
        {% endif %}

    </div>
    {% if section.settings.more_text != ""%}
        <div class="block_TikTok_list-more"><a class="secondary_btn" href="{{ section.settings.link | default : 'javascript:;'}}">
          <svg t="1649231190817" class="icon" style="margin-right:8px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12300" width="20" height="20"><path d="M216.96 656.170667a142.805333 142.805333 0 0 1 65.962667-107.861334 156.373333 156.373333 0 0 1 125.738666-17.066666V399.36a297.984 297.984 0 0 1 50.773334 2.986667v169.685333a156.373333 156.373333 0 0 0-125.738667 17.066667 142.805333 142.805333 0 0 0-66.048 107.904 151.637333 151.637333 0 0 0 28.714667 94.421333q-9.216-4.736-17.962667-10.325333a142.037333 142.037333 0 0 1-61.482667-124.928zM747.818667 155.477333A228.565333 228.565333 0 0 1 689.578667 40.874667h48.384a210.432 210.432 0 0 0 60.672 155.477333l0.938666 1.024a278.912 278.912 0 0 1-51.754666-41.898667z m233.045333 119.466667v166.4a625.664 625.664 0 0 1-107.434667-14.08 419.456 419.456 0 0 1-104.789333-41.130667s-28.330667-17.834667-30.592-19.029333v343.424a332.373333 332.373333 0 0 1-21.333333 106.666667 320 320 0 0 1-58.922667 93.312 327.893333 327.893333 0 0 1-241.237333 105.472 339.968 339.968 0 0 1-179.2-51.498667 356.565333 356.565333 0 0 1-51.2-41.130667l0.384 0.298667a339.712 339.712 0 0 0 179.2 51.456 327.893333 327.893333 0 0 0 241.28-105.472 320.682667 320.682667 0 0 0 58.922666-93.312 333.397333 333.397333 0 0 0 21.333334-106.666667V326.229333c2.261333 1.28 30.592 19.072 30.592 19.072a420.394667 420.394667 0 0 0 104.789333 41.173334 629.930667 629.930667 0 0 0 107.434667 14.08V270.165333a171.434667 171.434667 0 0 0 50.816 4.864z" fill="#EE1D52" p-id="12301"></path><path d="M930.048 270.122667v130.346666a624.810667 624.810667 0 0 1-107.392-14.08 419.370667 419.370667 0 0 1-104.832-41.130666s-28.288-17.792-30.592-19.072v343.466666a333.141333 333.141333 0 0 1-21.333333 106.666667 321.834667 321.834667 0 0 1-58.922667 93.312 327.893333 327.893333 0 0 1-241.28 105.472 340.053333 340.053333 0 0 1-179.2-51.456l-0.426667-0.298667a300.202667 300.202667 0 0 1-73.216-110.933333 323.882667 323.882667 0 0 1-18.901333-110.933333 296.064 296.064 0 0 1 38.784-140.8 334.208 334.208 0 0 1 75.349333-88.192 317.738667 317.738667 0 0 1 89.6-50.816 311.466667 311.466667 0 0 1 110.933334-22.357334v131.882667a156.714667 156.714667 0 0 0-125.738667 17.066667 137.856 137.856 0 0 0-4.266667 232.832q8.533333 5.546667 17.92 10.282666a136.917333 136.917333 0 0 0 32.853334 30.592 148.736 148.736 0 0 0 148.394666 13.568 136.021333 136.021333 0 0 0 76.586667-80.597333 187.733333 187.733333 0 0 0 7.936-66.645333V40.874667h127.189333a228.864 228.864 0 0 0 58.24 114.602666 279.338667 279.338667 0 0 0 51.754667 41.898667 270.336 270.336 0 0 0 70.954667 52.010667 285.866667 285.866667 0 0 0 59.605333 20.736z" p-id="12302"></path><path d="M62.250667 771.968l3.114666 8.533333c-0.384-1.024-1.536-3.925333-3.114666-8.533333z" fill="#69C9D0" p-id="12303"></path><path d="M297.6 421.674667a317.781333 317.781333 0 0 0-89.6 50.816 334.250667 334.250667 0 0 0-75.306667 88.362666 295.424 295.424 0 0 0-38.784 140.8 322.645333 322.645333 0 0 0 18.901334 110.933334 301.397333 301.397333 0 0 0 73.173333 110.933333 347.690667 347.690667 0 0 1-76.074667-68.266667 328.234667 328.234667 0 0 1-47.786666-82.858666 1.92 1.92 0 0 1 0-0.256 322.048 322.048 0 0 1-18.901334-110.933334 296.021333 296.021333 0 0 1 38.784-140.8 333.866667 333.866667 0 0 1 75.306667-88.362666 350.464 350.464 0 0 1 152.661333-68.608 327.296 327.296 0 0 1 98.730667-1.365334v37.589334a311.466667 311.466667 0 0 0-111.104 22.016z" fill="#4ED8E2" p-id="12304"></path><path d="M689.536 40.874667h-127.232v647.424a190.592 190.592 0 0 1-7.893333 66.602666 136.533333 136.533333 0 0 1-76.586667 80.597334 148.394667 148.394667 0 0 1-148.394667-13.568 137.258667 137.258667 0 0 1-32.938666-30.464 146.773333 146.773333 0 0 0 130.517333 3.285333 136.874667 136.874667 0 0 0 76.586667-80.64 188.416 188.416 0 0 0 7.850666-66.56V0h175.658667a153.002667 153.002667 0 0 0 2.432 40.874667z m240.554667 193.237333v36.010667a284.8 284.8 0 0 1-59.733334-20.693334 269.269333 269.269333 0 0 1-70.954666-52.053333 194.602667 194.602667 0 0 0 20.181333 11.136 236.842667 236.842667 0 0 0 110.464 25.557333z" fill="#4ED8E2" p-id="12305"></path></svg>
          <span>{{ section.settings.more_text }}</span>
        </a></div>
    {% endif %}


    <script type="text/html" id="tikTok-item-{{blockId}}">
        {% raw %}
        {% for item in list %}
        {% assign info = item.info %}
        <div class="card-tiktok swiper-slide" data-index="{{forloop.index0}}">
          <div class="card-tiktok-cover card-tiktok-click" data-index="{{forloop.index0}}">
            {%- if info.author_name -%}
            <div class="tiktok-cover-author">
              <div class="tiktok-logo">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="94.683" height="24" viewBox="0 0 94.683 24">
                  <defs>
                    <filter  x="27.73" y="2.612" width="66.952" height="20.625" filterUnits="userSpaceOnUse">
                      <feOffset dy="1" input="SourceAlpha"/>
                      <feGaussianBlur stdDeviation="1" result="blur"/>
                      <feFlood flood-opacity="0.4"/>
                      <feComposite operator="in" in2="blur"/>
                      <feComposite in="SourceGraphic"/>
                    </filter>
                  </defs>
                  <g id="tiktok_text" transform="translate(-381 -290)">
                    <g id="tiktok" transform="translate(253.106 194)">
                      <path  d="M245.812,143.893a3.347,3.347,0,0,1,1.546-2.528,3.665,3.665,0,0,1,2.947-.4v-3.091a6.984,6.984,0,0,1,1.19.07v3.977a3.665,3.665,0,0,0-2.947.4A3.347,3.347,0,0,0,247,144.85a3.554,3.554,0,0,0,.673,2.213q-.216-.111-.421-.242a3.329,3.329,0,0,1-1.441-2.928Zm12.442-11.735a5.357,5.357,0,0,1-1.365-2.686h1.134a4.932,4.932,0,0,0,1.422,3.644l.022.024A6.537,6.537,0,0,1,258.254,132.158Zm5.462,2.8v3.9a14.664,14.664,0,0,1-2.518-.33,9.831,9.831,0,0,1-2.456-.964s-.664-.418-.717-.446v8.049a7.79,7.79,0,0,1-.5,2.5,7.5,7.5,0,0,1-1.381,2.187,7.685,7.685,0,0,1-5.654,2.472,7.968,7.968,0,0,1-4.2-1.207,8.357,8.357,0,0,1-1.2-.964l.009.007a7.962,7.962,0,0,0,4.2,1.206,7.685,7.685,0,0,0,5.655-2.472,7.516,7.516,0,0,0,1.381-2.187,7.814,7.814,0,0,0,.5-2.5v-8.049c.053.03.717.447.717.447a9.853,9.853,0,0,0,2.456.965,14.764,14.764,0,0,0,2.518.33v-3.056a4.018,4.018,0,0,0,1.191.114Z" transform="translate(-113.733 -32.514)" fill="#ee1d52"/>
                      <path  d="M189.088,134.845V137.9a14.644,14.644,0,0,1-2.517-.33,9.829,9.829,0,0,1-2.457-.964s-.663-.417-.717-.447v8.05a7.808,7.808,0,0,1-.5,2.5,7.543,7.543,0,0,1-1.381,2.187,7.685,7.685,0,0,1-5.655,2.472,7.97,7.97,0,0,1-4.2-1.206l-.01-.007a7.036,7.036,0,0,1-1.716-2.6v0a7.591,7.591,0,0,1-.443-2.6,6.939,6.939,0,0,1,.909-3.3,7.833,7.833,0,0,1,1.766-2.067,7.447,7.447,0,0,1,2.1-1.191,7.3,7.3,0,0,1,2.6-.524v3.091a3.673,3.673,0,0,0-2.947.4,3.231,3.231,0,0,0-.1,5.457q.2.13.42.241a3.209,3.209,0,0,0,.77.717,3.486,3.486,0,0,0,3.478.318,3.188,3.188,0,0,0,1.795-1.889,4.4,4.4,0,0,0,.186-1.562V129.472h2.981a5.364,5.364,0,0,0,1.365,2.686,6.547,6.547,0,0,0,1.213.982,6.336,6.336,0,0,0,1.663,1.219A6.7,6.7,0,0,0,189.088,134.845Z" transform="translate(-40.296 -32.514)"/>
                      <path  d="M143.68,728.224v0l.073.2C143.744,728.4,143.717,728.332,143.68,728.224Z" transform="translate(-15.227 -614.131)" fill="#69c9d0"/>
                      <path  d="M133.969,391.2a7.448,7.448,0,0,0-2.1,1.191,7.834,7.834,0,0,0-1.765,2.071,6.924,6.924,0,0,0-.909,3.3,7.562,7.562,0,0,0,.443,2.6v0a7.064,7.064,0,0,0,1.715,2.6,8.149,8.149,0,0,1-1.783-1.6,7.693,7.693,0,0,1-1.12-1.942.045.045,0,0,1,0-.006v0a7.548,7.548,0,0,1-.443-2.6,6.938,6.938,0,0,1,.909-3.3,7.825,7.825,0,0,1,1.765-2.071,8.214,8.214,0,0,1,3.578-1.608,7.671,7.671,0,0,1,2.314-.032v.881A7.3,7.3,0,0,0,133.969,391.2Z" transform="translate(0 -285.317)" fill="#4ed8e2"/>
                      <path  d="M344.732,96.958H341.75v15.174a4.467,4.467,0,0,1-.185,1.561,3.2,3.2,0,0,1-1.795,1.889,3.478,3.478,0,0,1-3.478-.318,3.217,3.217,0,0,1-.772-.714,3.44,3.44,0,0,0,3.059.077,3.208,3.208,0,0,0,1.795-1.89,4.416,4.416,0,0,0,.184-1.56V96h4.117A3.586,3.586,0,0,0,344.732,96.958Zm5.638,4.529v.844a6.675,6.675,0,0,1-1.4-.485,6.311,6.311,0,0,1-1.663-1.22,4.561,4.561,0,0,0,.473.261A5.551,5.551,0,0,0,350.369,101.486Z" transform="translate(-201.577)" fill="#4ed8e2"/>
                    </g>
                    <g transform="matrix(1, 0, 0, 1, 381, 290)" >
                      <path  d="M-19.6-11.241h-3.885V0h-2.909V-11.241H-30.27v-2.373H-19.6Zm1.327-1.617a1.349,1.349,0,0,1,.461-1.059,1.717,1.717,0,0,1,1.182-.409,1.7,1.7,0,0,1,1.2.417,1.362,1.362,0,0,1,.457,1.05,1.387,1.387,0,0,1-.466,1.068,1.69,1.69,0,0,1-1.187.426,1.667,1.667,0,0,1-1.178-.431A1.391,1.391,0,0,1-18.272-12.858ZM-18.062,0V-9.721h2.83V0ZM-3.138,0H-6.583L-9.817-4.808h-.035V0h-2.839V-14.388h2.839v9.158h.035l3.032-4.491H-3.4L-7-5.133ZM7.717-11.241H3.832V0H.923V-11.241H-2.953v-2.373H7.717Zm1,6.425a4.964,4.964,0,0,1,1.437-3.771,5.363,5.363,0,0,1,3.863-1.371,5.1,5.1,0,0,1,3.727,1.349,4.839,4.839,0,0,1,1.38,3.625A5.143,5.143,0,0,1,17.71-1.178,5.178,5.178,0,0,1,13.878.237a5.164,5.164,0,0,1-3.766-1.358A4.923,4.923,0,0,1,8.719-4.816Zm2.874-.035q0,2.909,2.373,2.909,2.276,0,2.276-2.988,0-2.848-2.294-2.848a2.109,2.109,0,0,0-1.736.765A3.352,3.352,0,0,0,11.593-4.852ZM30.683,0H27.237L24-4.808h-.035V0H21.129V-14.388h2.839v9.158H24l3.032-4.491h3.384l-3.6,4.588Z" transform="translate(61 19)" fill="#fff"/>
                    </g>
                    <rect  width="92" height="24" transform="translate(381 290)" fill="#fff" opacity="0"/>
                  </g>
                </svg>
              </div>
              <span>@{{info.author_name}}</span>
            </div>
            {%- endif -%}
            <div class="card-tiktok-status">
            {%- if item.infoStatus == 3 -%}
              <svg t="1642562311355" class="icon" viewBox="0 0 1026 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19148" width="60" height="60"><path d="M982.096842 123.724351H44.867368A44.912281 44.912281 0 0 0 0 168.591719v686.816562a44.912281 44.912281 0 0 0 44.867368 44.91228h937.229474a44.912281 44.912281 0 0 0 44.867369-44.91228V168.591719a44.912281 44.912281 0 0 0-44.867369-44.867368z m19.536842 44.867368v226.474667H807.855158V149.054877h174.259649a19.563789 19.563789 0 0 1 19.518877 19.536842z m-782.515649 443.46386H25.339509V411.953404h193.778526z m25.330526-463.000702h538.049123v725.899228h-538.049123z m563.415579 262.907509h193.778527v200.08421H807.86414zM44.876351 149.054877h174.259649v246.020491H25.357474V168.591719a19.563789 19.563789 0 0 1 19.518877-19.536842zM25.339509 855.408281V628.933614h193.778526v246.020491h-174.259649a19.563789 19.563789 0 0 1-19.518877-19.545824z m956.766316 19.545824h-174.25965V628.933614h193.778527v226.474667a19.563789 19.563789 0 0 1-19.52786 19.545824z" fill="#BBBBBB" p-id="19149"></path><path d="M421.313123 640.368281a30.450526 30.450526 0 0 1-16.375018-4.581053 33.926737 33.926737 0 0 1-14.758175-29.76786V416.956632a34.007579 34.007579 0 0 1 14.632421-29.87565 34.573474 34.573474 0 0 1 33.783017-0.152701l167.468913 84.039859c26.821614 13.680281 30.75593 31.600281 30.711017 41.058807s-4.096 27.297684-30.818807 40.663579l-24.252631 12.449685-142.264141 70.826666a42.109754 42.109754 0 0 1-18.126596 4.401404z m-0.422176-228.666386a2.003088 2.003088 0 0 0-0.646736 0.071859 10.778947 10.778947 0 0 0-0.898246 5.173895v189.062737a7.913544 7.913544 0 0 0 1.149754 5.12 9.171088 9.171088 0 0 0 6.161965-1.347368l166.175439-83.08772c9.054316-4.491228 14.830035-10.31186 14.848-14.803087 0-3.592982-3.862456-9.377684-14.785123-14.95579l-167.073684-83.869193a11.838877 11.838877 0 0 0-4.931369-1.356351z" fill="#BBBBBB" p-id="19150"></path></svg>
            {%- elsif item.infoStatus == 2 -%}
              <svg t="1648696973533" class="swiper-no-swiping" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13846" width="48" height="48"><path d="M64 511.99984C64 264.584462 264.584462 64 511.99984 64 759.415218 64 959.99968 264.584462 959.99968 511.99984 959.99968 759.415218 759.415218 959.99968 511.99984 959.99968 264.584462 959.99968 64 759.415218 64 511.99984M414.843608 309.742846C386.052152 293.883651 362.66656 307.56258 362.66656 340.415901L362.66656 683.553912C362.66656 716.1683 386.022285 730.116029 414.843608 714.226968L729.070696 540.791296C757.802419 524.902235 757.862152 499.097445 729.070696 483.178517L414.843608 309.742846Z" p-id="13847" fill="#ffffff"></path></svg>
            {%- else -%}
              <svg t="1648199679625" class="icon" viewBox="0 0 1077 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20132" width="60" height="60"><path d="M650.271124 497.731368l-217.195789-131.045052a18.728421 18.728421 0 0 0-28.389053 16.033684v262.090105a18.674526 18.674526 0 0 0 28.402526 16.033684l217.19579-131.045052a18.728421 18.728421 0 0 0 0-32.067369z m0 0" fill="#999999" p-id="20133"></path><path d="M665.887124 945.623579a462.376421 462.376421 0 1 1 292.378948-365.877895 246.851368 246.851368 0 0 1 35.84 15.845053 500.439579 500.439579 0 1 0-304.74779 381.453474 248.926316 248.926316 0 0 1-23.471158-31.420632z" fill="#999999" p-id="20134"></path><path d="M875.079545 611.759158a202.105263 202.105263 0 1 0 202.105263 202.105263 202.105263 202.105263 0 0 0-202.105263-202.105263z m30.773895 348.968421a38.076632 38.076632 0 0 1-13.123368 13.743158 29.049263 29.049263 0 0 1-16.855579 3.745684 35.947789 35.947789 0 0 1-17.812211-4.365474 30.127158 30.127158 0 0 1-12.126316-12.786526 38.265263 38.265263 0 0 1-4.365473-17.81221 35.031579 35.031579 0 0 1 4.365473-16.855579 28.294737 28.294737 0 0 1 12.490106-12.126316 45.338947 45.338947 0 0 1 17.515789-4.688842 32.916211 32.916211 0 0 1 16.855579 4.365473 35.354947 35.354947 0 0 1 12.490105 12.8 35.799579 35.799579 0 0 1 5.295158 16.855579 31.905684 31.905684 0 0 1-4.729263 17.111579z m9.903158-248.468211l-19.550316 151.026527a39.895579 39.895579 0 0 1-6.426947 14.618947 15.063579 15.063579 0 0 1-14.672842 6.4 16.734316 16.734316 0 0 1-13.554527-6.4 26.179368 26.179368 0 0 1-6.022737-14.672842l-18.863157-151.026526a41.768421 41.768421 0 0 1 0.754526-21.086316 37.497263 37.497263 0 0 1 12.786526-16.936421 41.768421 41.768421 0 0 1 24.845474-8.650105 43.978105 43.978105 0 0 1 24.845474 7.518315 32.808421 32.808421 0 0 1 14.309052 17.690948 51.2 51.2 0 0 1 1.549474 21.436631z" fill="#999999" p-id="20135"></path></svg>
            {%- endif -%}
            </div>

            {%- if info.thumbnail_url -%}
            <img src="{{info.thumbnail_url}}" class="card-tiktok-cover-image" alt="">
            {%- endif -%}
          </div>
          <div class="card-tiktok-info">
            {%- if  info.title and info.title != "" -%}
            <div class="card-tiktok-title line-clamp2 card-tiktok-click" data-index="{{forloop.index0}}">{{info.title}}</div>
            {%- endif -%}
            {%- if item.productList.size > 0 -%}
            
            <div class="card-tiktok-product block_video-pc-show" id="block_TikTok-product-{{blockId}}">
              <ul class="swiper-wrapper">
              {%- for product in item.productList -%}
                <li class="swiper-slide {% if item.productList.size == 1 %}swiper-slide-1{% endif %} swiper-no-swiping">
                  <a class="card-tiktok-product-image" href="/products/{{product.handle}}?data_from={{data_from}}">
                  <img  data-src="{{ product.image.src }}" src="/theme/default/assets/empty_loading.png" alt="">
                  </a>
                  <div class="card-tiktok-product-info">
                    <a class="card-tiktok-product-title line-clamp2 general_title-color" href="/products/{{product.handle}}?data_from={{data_from}}">{{product.title}}</a>
                    <div class="card-tiktok-product-price general_buying-color">{{product.variant.price | money}}</div>
                  </div>
                 
                </li>
              {%- endfor -%}
              </ul>
              {%- if item.productList.size > 1 -%}
              <div class="tiktok-product-prev"><svg t="1635160440262" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1353" width="24" height="24"><path d="M511.609097 961.619254" p-id="1354"></path><path d="M360.749204 511.010463 360.749204 511.010463l382.080022-382.074905c14.762215-14.788821 14.762215-38.777165 0-53.585429-14.812357-14.788821-38.799678-14.788821-53.607942 0L283.415908 481.201553c-1.107217 0.867764-2.190899 1.824555-3.206018 2.843768-14.788821 14.808264-14.788821 38.795585 0 53.585429l408.226518 408.230612c14.808264 14.807241 38.795585 14.807241 53.584406 0 14.785751-14.767332 14.785751-38.754652 0-53.562916L360.749204 511.010463 360.749204 511.010463zM360.749204 511.010463" p-id="1355"></path></svg></div>
              <div class="tiktok-product-next"><svg t="1635160485836" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="24" height="24"><path d="M511.609097 961.619254" p-id="1487"></path><path d="M662.268422 511.010463 280.997835 892.299469c-14.785751 14.808264-14.785751 38.796608 0 53.562916 14.788821 14.807241 38.776142 14.807241 53.584406 0l408.226518-408.230612c14.789844-14.790868 14.789844-38.777165 0-53.585429-1.01512-1.020236-2.099824-1.976004-3.206018-2.843768L333.797365 75.350129c-14.808264-14.788821-38.795585-14.788821-53.607942 0-14.762215 14.808264-14.762215 38.796608 0 53.585429L662.268422 511.010463 662.268422 511.010463 662.268422 511.010463zM662.268422 511.010463" p-id="1488"></path></svg></div>
              {%- endif -%}
            </div>
            <div class="card-tiktok-product block_video-pc-hide">
              <div class="mobile-wrapper">
                {%- for product in item.productList -%}
                  <div class="swiper-slide">
                    <a class="card-tiktok-product-image" href="/products/{{product.handle}}?data_from={{data_from}}">
                    <img  data-src="{{ product.image.src }}" src="/theme/default/assets/empty_loading.png" alt="">
                    </a>
                    <div class="card-tiktok-product-info">
                      <a class="card-tiktok-product-title line-clamp2 general_title-color" href="/products/{{product.handle}}?data_from={{data_from}}">{{product.title}}</a>
                      <div class="card-tiktok-product-price general_buying-color">{{product.variant.price | money}}</div>
                    </div>
                  </div>
                {%- endfor -%}
                </div>
            </div>
            {%- endif -%}

          </div>
        </div>
        {% endfor %}
        {% endraw %}
    </script>
</div>




<script type="text/javascript">
(function(){const warpDOM = $("#block_TikTok_list-{{blockId}}");
const blocks = {{section.blocks | json}};

function initSwiper(){

    new Swiper("#block_TikTok_list-{{blockId}}", {
        slidesPerView: 4,
        spaceBetween: 30,
        navigation: {
            nextEl: "#block_next_{{ blockId  }}",
            prevEl: "#block_prev_{{ blockId  }}"
        },
        pagination: {
            el: '.swiper-tiktok-pagination-{{ blockId }}',
        },
        autoHeight: true,
        noSwiping : true,
        breakpoints: {
            1024: {
                slidesPerView: 3,
                spaceBetween: 20
            },
            769: {
                slidesPerView: 1
            }
        }
      });
      
      new Swiper("#block_TikTok_list-{{blockId}} .block_video-pc-show", {
          slidesPerView: 1,
          noSwiping : true,
          navigation: {
              nextEl: ".tiktok-product-next",
              prevEl: ".tiktok-product-prev"
          }
      });
}

function getTikTokInfo(url,option){
    $.ajax({
        type: "get",
        url: "https://www.tiktok.com/oembed",
        data: {
            url: url
        },
        timeout:10000,
        dataType: "json",
        complete:function(){
            option.complete && option.complete()
        },
        success: function (response) {
            option.success && option.success(response)
        },
        error:function(){
            option.error && option.error()
            // load.close();
        }
    });
}



function getProducts(productIds,option){
    $.ajax({
        type: "get",
        url: "/homeapi/products/list/" + productIds,
        dataType: "json",
        complete:function(){
            option.complete && option.complete()
        },
        success: function (response) {
            if (!response.code) {
                option.success && option.success(response.data.list)
            }else{
                option.error && option.error()
            }
        },
        error:function(){
            option.error && option.error()
        }
    });
}

function tiktokPopup(){
    const index = $(this).data("index");
    if(blocks[index].info && blocks[index].info.html){
        const popupLayer = moi.popup();
        popupLayer.addContent(`<div class="layer-tiktok"> <a href="javascript:;" class="layer-tiktok-close">
        <svg t="1633405599567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1984" width="16" height="16"><path d="M453.44 512L161.472 220.032a41.408 41.408 0 0 1 58.56-58.56L512 453.44 803.968 161.472a41.408 41.408 0 0 1 58.56 58.56L570.56 512l291.968 291.968a41.408 41.408 0 0 1-58.56 58.56L512 570.56 220.032 862.528a41.408 41.408 0 0 1-58.56-58.56L453.44 512z" p-id="1985"></path></svg>
    </a>${blocks[index].info.html}</div>`);
    popupLayer.temp.find(".layer-tiktok-close").click(function () {
        popupLayer.close();
      });
    }
}


const tikTokTemp = $("#tikTok-item-{{blockId}}").html();
function renderTikTok(list){
    load.close();
    engine.parseAndRender(tikTokTemp, {
        lang: lang,
        blockId:"{{blockId}}",
        data_from:'{{ data_from }}',
        list: list
    }).then(function (html) {
        warpDOM.find(".tiktok-item-container ").append(html);
        initSwiper();
        {% comment %} addLazyImages(warpDOM.find("img[data-src]")); {% endcomment %}
        warpDOM.find(".card-tiktok-click").click(tiktokPopup)
        // window.lazyImageShow()
    })
}


const load = moi.nodeShowLoading(warpDOM,"mo-loading-black");

if(blocks.length){
    let tiktokCount = 0;
    let isAsync = false;
    blocks.forEach(block => {
        const url = block.video.value;
        const ids = block.products.map(item=>item.id).join(",");
        let isGetProduct = true;
        block['infoStatus'] = 3;
        if(ids){
            isGetProduct = false;
            isAsync = true;
            getProducts(ids,{
                complete:function(){
                    isGetProduct = true;
                    if(tiktokCount === 0 && isGetProduct){
                        renderTikTok(blocks)
                    }
                },
                success: function (response) {
                    block['productList'] = response;
                },
                error:function(){}
            });
        }

        // InfoStatus 1 Failure 2 Success 3 Empty
        if(url){
            isAsync = true;
            tiktokCount++;
            getTikTokInfo(url,{
                complete:function(){
                    tiktokCount--;
                    if(tiktokCount === 0 && isGetProduct){
                        renderTikTok(blocks)
                    }
                },
                success: function (response) {
                    block['info'] = response;
                    block['infoStatus'] = 2;
                },
                error:function(){
                    block['infoStatus'] = 1;
                }
            });
        }
    });
    if(!isAsync){
        renderTikTok(blocks)
    }
}else{
    renderTikTok([{},{},{},{}])
}})()
</script>
{% schema %}
{
	"class": "block_TikTok_list",
	"is_global": false,
	"icon": "icon-tiktok",
	"name": {
		"zh_CN": "TikTok列表",
		"en_US": "TikTok list"
	},
	"max_blocks": "20",
	"blocks": [
		{
			"name": {
				"zh_CN": "视频",
				"en_US": "Video"
			},
			"type": "video-item",
			"settings": [
				{
					"type": "card_video",
					"error": {
						"zh_CN": "输入地址错误",
						"en_US": "Wrong address entered"
					},
					"rule": [
						"tiktok"
					],
					"label": {
						"zh_CN": "TikTok视频地址",
						"en_US": "TikTok video address"
					},
					"placeholder": {
						"zh_CN": "请输入TikTok视频的URL",
						"en_US": "Please enter the URL of TikTok videos"
					},
					"info": {
						"zh_CN": "仅支持TikTok，请输入完整链接例如：https://www.tiktok.com/@noemi.la_unica/video/xxxxxx",
						"en_US": "Only supports TikTok, please enter the full link for example: https://www.tiktok.com/@noemi.la_unica/video/xxxxxx"
					},
					"id": "video",
					"default": {
						"id": "",
						"model": "",
						"value": ""
					}
				},
				{
					"type": "card_product_checkbox",
					"label": {
						"zh_CN": "关联商品",
						"en_US": "Associated product"
					},
					"max": 10,
					"id": "products",
					"default": []
				}
			]
		}
	],
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "title",
			"default": "Youtube"
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "描述",
				"en_US": "Description"
			},
			"id": "detail",
			"default": "Some description"
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text",
			"default": ""
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "跳转链接",
				"en_US": "Jump links"
			},
			"default": "",
			"id": "link"
		}
	],
	"default": {
		"settings": {
			"title": "TikTok",
			"detail": "Some description",
			"show_type": "1",
			"more_text": "View More",
			"link": ""
		},
		"blocks": [
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			},
			{
				"video": {
					"value": "",
					"id": "",
					"model": ""
				},
				"products": [],
				"block_type": "video-item"
			}
		]
	}
}
{% endschema %}